<template>
  <div>
    <el-dialog
      title="货道设置"
      :visible="dialogCargo"
      width="50%"
      @close="close"
    >
      <el-row :gutter="20">
        <el-col :span="20" class="top">
          <span>货道行数：{{ title.vmRow }}</span>
          <span>货道列数：{{ title.vmCol }}</span>
          <span>货道容量(个)： {{ title.channelMaxCapacity }}</span>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="permutation">智能排货</el-button>
        </el-col>
      </el-row>
      <div class="goods">
        <div v-for="item in list" :key="item.channelCode" class="card">
          <img v-if="item.sku" :src="item.sku.skuImage" alt="">
          <img v-else src="@/assets/暂无.png" alt="">
          <p v-if="item.sku">{{ item.sku.skuName }}</p>
          <p v-else>暂无商品</p>
          <div class="bottom clearfix">
            <el-button
              type="primary"
              class="button"
              @click="openAdd"
            >添加</el-button>
            <el-button
              type="danger"
              class="button"
              @click="del(item.sku.classId)"
            >删除</el-button>
          </div>
          <div class="box">{{ item.channelCode }}</div>
        </div>
        <div class="left" @click="toLeft">
          <i class="el-icon-arrow-left" style="font-size: 60px" />
        </div>
        <div class="right" @click="toRight">
          <i class="el-icon-arrow-right" style="font-size: 60px" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="margin-right: 50%"
          type="warning"
          @click="dialogCargo = false"
        >确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog
      title="选择商品"
      :visible.sync="addDialog"
      width="50%"
      close="goodsDialog"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品名称:">
          <el-input v-model="goodsName" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="goods">
        <div v-for="(ite,index) in goodsList" :key="index" class="card" @click="changeGoods(ite)">
          <img :src="ite.skuImage" alt="">
          <p>{{ ite.skuName }}</p>
        </div>
        <div class="left" @click="toLeft">
          <i class="el-icon-arrow-left" style="font-size: 60px" />
        </div>
        <div class="right" @click="toRight">
          <i class="el-icon-arrow-right" style="font-size: 60px" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          style="margin-right: 45%"
          @click="addSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 排货 -->
    <el-dialog
      title="智能排货"
      :visible.sync="editDialog"
      width="50%"
    >
      <p>该区域属于{{ areaName }}商圈适合销售以下商品：</p>
      <div class="goods">
        <div v-for="item in topGoodsList" :key="item.skuId" class="card">
          <img :src="item.image" alt="">
          <p>{{ item.skuName }}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          style="margin-right: 45%"
          @click="editDialog = false"
        >采纳建议</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { searchGoods, delGoods, getBusinessType, topGoods, updateGoods } from '@/api/equipment'
export default {
  name: 'CardoWay',
  props: {
    dialogCargo: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object,
      required: true
    },
    title: {
      type: Object,
      required: true
    },
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        skuName: ''
      },
      addDialog: false,
      editDialog: false,
      goodsList: [],
      goodsName: '',
      areaName: '',
      topGoodsList: [],
      cargoObj: {
        innerCode: '',
        channelList: {
          channelCode: '',
          skuId: ''
        }
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:dialogCargo', false)
    },
    openAdd() {
      this.getGoodsList()
      this.$emit('update:dialogCargo', false)
      this.addDialog = true
    },
    // 修改商品
    async changeGoods(ite) {
      this.cargoObj.channelList.skuId = ite.skuId
      console.log(this.cargoObj.channelList.skuId)
    },
    async addSubmit() {
      this.cargoObj.innerCode = this.list[this.id].innerCode
      this.cargoObj.channelList.channelCode = this.list[this.id].channelCode
      await updateGoods(this.cargoObj)
      this.getGoodsList()
      this.addDialog = false
      this.$emit('update:dialogCargo', true)
    },
    async getGoodsList() {
      const data = await searchGoods(this.queryObj)
      this.goodsList = data.currentPageRecords
      console.log(this.goodsList)
    },
    async del(id) {
      try {
        await delGoods(id)
      } catch (error) {
        this.$message.error('该类型正在使用')
      }
    },
    onSubmit() {
      this.queryObj.skuName = this.goodsName
      console.log(this.queryObj.skuName)
      this.getGoodsList()
    },
    async toLeft() {
      if (this.queryObj.pageIndex === 1) {
        this.queryObj.pageIndex = 1
      } else {
        this.queryObj.pageIndex -= 1
        const data = await searchGoods(this.queryObj)
        this.goodsList = data.currentPageRecords
      }
    },
    async toRight() {
      if (this.queryObj.pageIndex === 13) {
        this.queryObj.pageIndex = 13
        await searchGoods(this.queryObj)
      } else {
        this.queryObj.pageIndex += 1
        const data = await searchGoods(this.queryObj)
        this.goodsList = data.currentPageRecords
      }
    },
    // 排货
    async permutation() {
      const data = await getBusinessType(this.id)
      this.areaName = data
      const res = await topGoods(this.id)
      console.log(res)
      this.topGoodsList = res
      this.editDialog = true
    }
  }
}
</script>

<style scoped lang='less'>
.el-row {
  .top {
    display: flex;
    align-items: center;
    span {
      margin: 0 60px 0 30px;
    }
  }
}

.bottom {
  background-color: #fff;
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f6f7fb;
    width: 160px;
    height: 150px;
    position: relative;
    margin-bottom: 10px;
    img {
      position: relative;
      top: 20px;
      width: 80px;
      height: 80px;
    }
    p {
      position: relative;
      top: 20px;
    }
    .box {
      position: absolute;
      top: 5px;
      left: 0;
      width: 40px;
      height: 20px;
      line-height: 20px;
      background-color: #829bed;
      border-radius: 0 5px 5px 0;
      text-align: center;
      color: #fff;
    }
  }
    .left {
    position: absolute;
    top: 50%;
   left: -10px;
}
.right {
    position: absolute;
    top: 50%;
  right: -10px;
}
}
</style>
